<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElButton, ElTableColumn, ElTable } from 'element-plus';


//组件
import Limit from '@/views/content/util/limit.vue'
import { tableDiningVO } from '@/pojo/vo/tableDiningListVO'
import { res } from '@/pojo/dto/res'
import IButton from "@/views/content/util/button/iButton.vue"
import OButton from "@/views/content/util/button/oButton.vue"
import { tableTypeListVO } from '@/pojo/vo/tableTypeListVO'
import { getTableListApi, getTableTypeListApi, getTableTypeSelectListApi } from '@/apis/tableApi'

const itemList = ref<Array<tableDiningVO>>([])



const limitItemList = ref<Array<tableDiningVO>>([])
const getLimitItemList = (displayedItemList: Array<tableDiningVO>) => {
    limitItemList.value = displayedItemList
}

const getTableList = async () => {
    const res: res = await getTableListApi()
    itemList.value = res.data
    itemList.value = itemList.value.map(row => {
        return {
            ...row,
            isUse: row.isUse === 1 ? true : false
        };
    })

}
const getTableTypeSelectList = async () => {
    const res:res = await getTableTypeSelectListApi()
    tableTypeSelectList.value=res.data

}

const tableTypeSelectList = ref<Array<tableTypeListVO>>([])
const tableType = ref('全部')
onMounted(() => {
    getTableList()
    getTableTypeSelectList()
})
</script>


<template>
    <div>
        <div>
            <span>
                <IButton title="添加桌位" @click="" />
                <ElButton type="warning" plain @click="">批量新增</ElButton>
                <ElButton type="warning" plain @click="">批量删除</ElButton>
            </span>
            <span style="margin-left: 20px;">
                <el-select v-model="tableType" placeholder="请选择" style="width: 240px">
                    <el-option value="全部"></el-option>
                    <el-option v-for="item in tableTypeSelectList" :value="item.name" />
                </el-select>
            </span>


        </div>

        <div style="margin-top: 20px;">
            <el-table :data="limitItemList" stripe
                :header-cell-style="{ background: 'rgb(243, 243, 243)', color: '#606266' }" :scrollbar-always-on=false
                style="width: 94%;height: 100%;">
                <el-table-column type="selection" width="30px">
                </el-table-column>
                <el-table-column label="id" prop="id"></el-table-column>
                <el-table-column label="排序" prop="sort"></el-table-column>
                <el-table-column label="桌位类型" prop="type">
                    <template #default="props">
                        <el-row :gutter="4">
                            <el-col :span="12">
                                <img v-if="props.row.type === '小桌'" src="@/assets/images/table/小桌.png" />
                                <img v-if="props.row.type === '中桌'" src="@/assets/images/table/中桌.png" />
                                <img v-if="props.row.type === '大桌'" src="@/assets/images/table/大桌.png" />
                            </el-col>
                            <el-col :span="12">
                                <div v-if="props.row.type === '小桌'" style="position: relative;top: 10px;"> <el-tag
                                        type="success"> {{ props.row.type }}</el-tag></div>
                                <div v-if="props.row.type === '中桌'" style="position: relative;top: 10px;"> <el-tag
                                        type="warning"> {{ props.row.type }}</el-tag></div>
                                <div v-if="props.row.type === '大桌'" style="position: relative;top: 10px;"> <el-tag
                                        type="danger"> {{ props.row.type }}</el-tag></div>
                            </el-col>

                        </el-row>

                    </template>
                </el-table-column>
                <el-table-column label="桌位编号" prop="name"></el-table-column>

                <el-table-column label="人数区间">
                    <template #default="props">
                        <label>{{ props.row.minPeople }}</label>
                        <label>~</label>
                        <label>{{ props.row.maxPeople }}人</label>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="isUse">
                    <template #default="{ row }">
                        <el-switch v-model="row.isUse" />
                    </template>
                </el-table-column>
                <el-table-column label="小程序链接" prop="link" width="200px">
                    <template #default="{ row }">
                        <div class="table-link">{{ row.link }}</div>
                    </template>

                </el-table-column>
                <el-table-column label="操作">
                  <el-tooltip content="查看" placement="top">
                    <el-button icon="View" circle color=""></el-button>
                  </el-tooltip>
                  <el-tooltip content="编辑" placement="top">
                    <OButton type="edit" />
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <OButton type="del" />
                  </el-tooltip>
                </el-table-column>


            </el-table>
        </div>


        <Limit :item-list="itemList" @update-item-list="getLimitItemList"></Limit>
    </div>
</template>

<style lang="scss" scoped>
.table-link {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
</style>